<template>
  <div class="expressStatistics">
    <div class="chartArea">
      <zyInfoPanel title="快递数据统计" :showUnfoldButton="false" :titleFlex="false">
        <div class="timeSelect" slot="title">
          <div class="statisticsArea">共计：{{tmp_count}}件</div>
          <div class="inputArea">
            <el-date-picker v-model="time" type="month" placeholder="选择日期"
                            @change="getLogisticMonthCount"></el-date-picker>
            <el-select class="selectInput" v-model="companyId"
                       @change="getLogisticMonthCount">
              <el-option v-for="option in companyList" :key="option.company_id" :label="option.company_name"
                         :value="option.company_id"></el-option>
            </el-select>
          </div>
        </div>
        <div id="my_chart" class="my_chart" v-loading="chartLoading"
             v-if="(receiveData&&receiveData.length)||(sendData&&sendData.length)"></div>
        <div  class="noData" v-else>暂无数据</div>
      </zyInfoPanel>
    </div>
    <div class="ranking">
      <div class="rankingItem">
        <tablePanel tableName="SExpressStatisticsReceiveTable" tableTitle="合作站点收件总量排行榜" :tableList="receiveTableList"
                    :isShowIndex="false"
                    :tableData="receiveTableData" :total="receive_total" :currentPage="receive_page_start"
                    :pageSize="receive_page_size"
                    @sizeChange="sizeChange($event, 2)" @pageChange="pageChange($event, 2)">
          <el-date-picker v-model="receiveTime" type="month" placeholder="选择日期"
                          @change="getCooperStatisticsList(2)"></el-date-picker>
        </tablePanel>
      </div>
      <div class="splitLine"></div>
      <div class="rankingItem">
        <tablePanel tableName="SExpressStatisticsSendTable" tableTitle="合作站点寄件总量排行榜" :tableList="sendTableList"
                    :isShowIndex="false"
                    :tableData="sendTableData" :total="send_total" :currentPage="send_page_start"
                    :pageSize="send_page_size"
                    @sizeChange="sizeChange($event, 1)" @pageChange="pageChange($event, 1)">
          <el-date-picker v-model="sendTime" type="month" placeholder="选择日期"
                          @change="getCooperStatisticsList(1)"></el-date-picker>
        </tablePanel>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "SExpressStatistics",
		props: {},
		data() {
			return {
				chartLoading: false,
				companyList: [],
				companyId: '',
				time: new Date(),
				sendTableList: [
					{
						title: '排名',
						name: 'pm',
						isShow: true,
						isSelected: true
					},
					{
						title: '合作站',
						name: 'company_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件总数量',
						name: 'tmp',
						isShow: true,
						isSelected: true
					},
				],
				sendTime: new Date(),
				send_page_start: 1,
				send_page_size: 10,
				send_total: 0,
				sendTableData: [],
				receiveTableList: [
					{
						title: '排名',
						name: 'pm',
						isShow: true,
						isSelected: true
					},
					{
						title: '合作站',
						name: 'company_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件总数量',
						name: 'tmp',
						isShow: true,
						isSelected: true
					},
				],
				receiveTime: new Date(),
				receive_page_start: 1,
				receive_page_size: 10,
				receive_total: 0,
				receiveTableData: [],
				tmp_count: 0
			};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			getLogisticMonthCount() {
				this.chartLoading = true;
				this.$axios.post(this.$api.cooperStatistics, {
					date_time: this.time ? this.$Timestamp(new Date(this.time).getTime(), 'month') : '',
					company_id: this.companyId
				}).then(res => {
					let {code, msg, data} = res;
					this.chartLoading = false;
					if (code == 200) {
						let timeData = [], receiveData = [], sendData = [];
						data.data.received_data.forEach(item => {
							timeData.push(item.det_time);
							receiveData.push(item.tmp)
						});
						data.data.send_data.forEach(item => {
							sendData.push(item.tmp)
						});
						this.tmp_count = data.data.tmp_count;
						if((receiveData&&receiveData.length)||(sendData&&sendData.length)){
							this.draw(timeData, receiveData, sendData);
						}
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			getCompanyData() {
				this.$axios.post(this.$api.companyCooperList, {
					pagination: {
						page_start: 1,
						page_size: 9999
					}
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.companyList = data.list;
					} else {
						this.companyList =[]
					}
				}).catch(ret => {
					this.loading = false;
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			getCooperStatisticsList(logistics_type) {
				let postData = {}
				if (logistics_type === 1) {
					postData = {
						date_time: this.$Timestamp(new Date(this.sendTime).getTime(), 'month'),
						logistics_type,
						pagination: {
							page_start: this.send_page_start,
							page_size: this.send_page_size
						}
					}
				} else {
					postData = {
						date_time: this.$Timestamp(new Date(this.receiveTime).getTime(), 'month'),
						logistics_type,
						pagination: {
							page_start: this.receive_page_start,
							page_size: this.receive_page_size
						}
					}
				}
				this.$axios.post(this.$api.getCooperStatisticsList, postData).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this[logistics_type === 1 ? 'sendTableData' : 'receiveTableData'] = data.list;
						this[logistics_type === 1 ? 'send_total' : 'receive_total'] = data.pagination.total_count || 0;
					} else {
						this[logistics_type === 1 ? 'sendTableData' : 'receiveTableData'] = [];
						this[logistics_type === 1 ? 'send_total' : 'receive_total'] = 0;
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			sizeChange(val, logistics_type) {
				if (logistics_type === 1) {
					this.send_page_start = val;
				} else {
					this.receive_page_size = val;
				}
				this.getCooperStatisticsList(logistics_type)
			},
			pageChange(val, logistics_type) {
				if (logistics_type === 1) {
					this.send_page_size = val;
				} else {
					this.receive_page_start = val;
				}
				this.getCooperStatisticsList(logistics_type)
			},
			draw(timeData, receiveData, sendData) {
				this.myChart = this.$echarts.init(document.getElementById('my_chart'));
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#9BA3AF'
							}
						}
					},
					legend: {
						data: ['收件', '寄件'],
						bottom: '0',
					},
					grid: {
						top: '12px',
						left: '3%',
						right: '4%',
						bottom: '20px',
						containLabel: true
					},
					xAxis: {
						axisLabel: {
							textStyle: {
								color: "#9BA3AF",
								fontSize: 12,
							},
							formatter: '{value}'
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(199, 203, 209, 0.5)'
							}
						},
						type: 'category',
						boundaryGap: false,
						data: timeData
					},
					yAxis: [{
						type: 'value',
						axisTick: {show: false},
						axisLine: {
							lineStyle: {
								color: 'rgba(60,121,237,.1)'
							}
						},
						axisLabel: {
							textStyle: {
								color: "#9BA3AF",
								fontSize: 12,
							},
							formatter: function (value) {
								return value;
							}
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(44, 55, 76, 0.15)'
							}
						}
					}],
					series: [
						{
							name: '收件',
							type: 'line',
							stack: '总量',
							data: receiveData,
							smooth: true,
							color: '#0077FB',
							lineStyle: {
								normal: {           //F86C6B
									color: '#0077FB',
									width: 2,
								}
							},
						},
						{
							name: '寄件',
							type: 'line',
							stack: '总量',
							data: sendData,
							smooth: true,
							color: '#FBDB01'
						},
					]
				};
				this.myChart.setOption(option);
			},
		},
		mounted() {
			this.getLogisticMonthCount();
			this.getCompanyData();
			this.getCooperStatisticsList(1);
			this.getCooperStatisticsList(2);
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/sorting/expressDelivery/expressStatistics/index.less">

</style>
